<template>
	<view>
		<view class="statusbox">
			<view :class="[action==index?'action':'']" @click="tiao(index)" v-for="(item,index) in status" :key="index">
				{{item}}
			</view>
		</view>
		
		<!-- 今日访客 -->
		<uni-group title="今日访客">
			<uni-table stripe emptyText="暂无更多数据">
				<uni-tr>
					<uni-th align="center">访客姓名</uni-th>
					<uni-th align="center">访客电话</uni-th>
					<uni-th align="center">访客预约时间</uni-th>
					<uni-th align="center">预约状态</uni-th>
				</uni-tr>
				<uni-tr @click.native="trclick"  v-for="(item,index) in userlist.slice(0,20).filter(item=>{return item.ysstate==1})">
					<uni-td >{{item.visitorName}}</uni-td>
					<uni-td>{{item.phoneNumber}}</uni-td>
					<uni-td>{{item.appointmentName}}</uni-td>
					<uni-td>{{status[item.state-1]}}</uni-td>
				</uni-tr>
			</uni-table>
		</uni-group>
		<!-- 全部访客 -->
		<uni-group title="全部访客">
			<uni-table stripe emptyText="暂无更多数据">
				<uni-tr>
					<uni-th align="center">序号</uni-th>
					<uni-th align="center">访客姓名</uni-th>
					<uni-th align="center">访问日期</uni-th>
					<uni-th align="center">预约状态</uni-th>
					<uni-th align="center">操作</uni-th>
				</uni-tr>
				<uni-tr v-for="(item,index) in userlist.slice(0,20)">
					<uni-td>{{item.visitorName}}</uni-td>
					<uni-td>{{item.phoneNumber}}</uni-td>
					<uni-td>{{item.appointmentName}}</uni-td>
					<uni-td>{{status[item.state-1]}}</uni-td>
					<uni-td><button @click="vister(item.id)">查看</button></uni-td>
				</uni-tr>
			</uni-table>
		</uni-group>
		
		<button @click="add">新增预约</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				action:0,
				status:['全部','待审核','待访问','已完成'],
				userlist:[]
			}
			
		},
		onLoad() {
			this.getvisitlist()
		},
		methods: {
			trclick(){
				console.log(1213)
			},
			vister(){
				uni.navigateTo({
					url:"/pages/addvisit/addvisit"
				})
			},
			async getvisitlist(){
				const res=await this.$request.getvisitlist()
				console.log(res)
				this.userlist=res.data.rows
			},
			add(id){
				uni.navigateTo({
					url:"/pages/visiterinfo/visiterinfo?id="+id
				})
			},
			async tiao(index){
				if(index==1){
					this.userlist=this.userlist.filter(item=>{
						return item.state==2
					})
				}
				this.action=index
				
			},
			}
		
	}
</script>

<style lang="less">
	.statusbox{
		margin-top: 20px;
		display: grid;
		text-align: center;
		font-size: 32rpx;
		grid-template-columns: 1fr 1fr 1fr 1fr;
		view{
			border: 1px solid gray;
		}
	}
	.action{
		background-color: aqua;
	}
	

</style>
